<div class="inner">
  <h4>Position</h4>

  <vde-property label="X" type="number" item="mark" property="x"
                ng-model="mark.properties.x.value"
                scale="mark.properties.x.scale"
                field="mark.properties.x.field"
                can-drop-style="left" style="half"></vde-property>

  <vde-property label="Y" type="number" item="mark" property="y"
                ng-model="mark.properties.y.value"
                scale="mark.properties.y.scale"
                field="mark.properties.y.field"
                can-drop-style="left" style="half"></vde-property>

  <h4>Angle</h4>

  <vde-property label="Start" type="number" item="mark" property="startAngle"
                ng-model="mark.properties.startAngle.value"
                scale="mark.properties.startAngle.scale"
                field="mark.properties.startAngle.field"
                can-drop-style="left" style="half"></vde-property>

  <vde-property label="End" type="number" item="mark" property="endAngle"
                ng-model="mark.properties.endAngle.value"
                scale="mark.properties.endAngle.scale"
                field="mark.properties.endAngle.field"
                can-drop-style="left" style="half"></vde-property>

  <h4>Radius</h4>

  <vde-property label="Inner" type="number" item="mark" property="innerRadius"
                ng-model="mark.properties.innerRadius.value"
                scale="mark.properties.innerRadius.scale"
                field="mark.properties.innerRadius.field"
                can-drop-style="left" style="half"></vde-property>

  <vde-property label="Outer" type="number" item="mark" property="outerRadius"
                ng-model="mark.properties.outerRadius.value"
                scale="mark.properties.outerRadius.scale"
                field="mark.properties.outerRadius.field"
                can-drop-style="left" style="half"></vde-property>

  <h4>Fill</h4>

  <vde-property label="Color" type="color" item="mark" property="fill"
                ng-model="mark.properties.fill.value"
                scale="mark.properties.fill.scale"
                field="mark.properties.fill.field"
                can-drop-style="left" style="full"></vde-property>

  <vde-property label="Opacity" type="range" min="0" max="1" step="0.1" item="mark"
                property="fillOpacity" ng-model="mark.properties.fillOpacity.value"
                scale="mark.properties.fillOpacity.scale"
                field="mark.properties.fillOpacity.field"
                can-drop-style="left" style="full"></vde-property>

  <h4>Stroke</h4>

  <vde-property label="Color" type="color" item="mark" property="stroke"
                ng-model="mark.properties.stroke.value"
                scale="mark.properties.stroke.scale"
                field="mark.properties.stroke.field"
                can-drop-style="left" style="full"></vde-property>

  <vde-property label="Width" type="range" min="0" step="0.25" max="10" item="mark"
                property="strokeWidth" ng-model="mark.properties.strokeWidth.value"
                scale="mark.properties.strokeWidth.scale"
                field="mark.properties.strokeWidth.field"
                can-drop-style="left" style="full"></vde-property>
</div>